CSS Properties

Video Transcript:

Hello again and welcome to CSSvideos.com. My name is Ashton Sanders and this video will show you how to embed CSS into your website.

Now that you know the basic CSS Syntax and how to use the CSS Selector, I will describe the three ways you can embed (or use) Cascading Style Sheets in your website.

Inline CSS

The first way is called Inline Cascading Style Sheets. You can add CSS directly into the elements in your markup with the “style” attribute.

<div style=”color:red;”>
<p style=”font-size:12px;”>

“Style” is a “Core HTML Attribute” so you can apply it to any visual HTML/XHTML elements. (This excludes: html, head, title, base, meta, param, script and style.)  In other words you can use it on any HTML element that can actually be seen (the <body> element and its children).

This may seem to be the easiest way of using CSS, but it is not recommended as it completely ignores the best parts of Cascading Style Sheets. You might as well use font tags instead of CSS, but I’ll get into that more later in this video.

Internal Style Sheets

The second way adds CSS to a single document or web page by adding the following code into the <head> of your document using the <style> element.

<style type=”text/css”>

div {color: red;}
p {font-size: 12px;}

</style>

As you can see, <style> is an HTML element that is opened and closed. Within the <style> element is the CSS that will be applied to that page. There is no limit to the amount of CSS you can put inside the <style> element. You would enter this code in the <head> area of your web page (anywhere after <head> and before </head> in your HTML document) and that would apply this CSS to the elements of that web page.

External Style Sheets

The third, and most adventagous way to embed CSS into a document uses External Cascading Style Sheets (or External Style Sheets).  An external CSS file is simply a text file with a “.css” extension. This file can then be included into many different pages. This allows you to make one document that has the styling for your entire website. Then you include that file into every page of your website. This is the recommended way of using CSS in your website as it lets you make global visual changes (to an entire website) by only tweaking one file.

For Example, lets say you have a website where all the paragraphs are black, and you want to change them to grey. Since you have an external Style Sheet, you just open up that one CSS file and change the style for paragraphs to: color:grey; Now all the paragraphs on your website are grey!

Here’s the code you would use to include an external style sheet into a webpage:

<link type=”text/css” rel=”stylesheet” href=”/link/to/stylesheet.css” />

Conclusion

Thank you for watching this CSS Video. I hope you learned something from it and are able to apply it on your own web page hosting sites. This is the last of the CSS Basic Videos. Next, we will be getting into the CSS Properties!

See you soon,
Ashton Sanders